<template>
    <div class="login-box">
        <div class="left">
            <img src="@/assets/loginlogo.jpg" alt="">
        </div>
        <div class="right">
            <el-form :model="ruleForm1" :rules="rules" ref="ruleForm1" class="form" v-if="type == '1'" :key="type">
                <h2 class="title">登录账号</h2>
                <el-form-item label="" prop="userName">
                    <input class="input" type="text" placeholder="用户名" v-model="ruleForm1.userName">
                </el-form-item>
                <el-form-item label="" prop="password">
                    <input class="input" type="password" placeholder="密码" v-model="ruleForm1.password">
                </el-form-item>
                <el-form-item label="" prop="code">
                    <div class="code-box">
                        <input class="input-code" placeholder="验证码" v-model="ruleForm1.code">
                        <div class="code">
                            <img :src="code" alt="">
                        </div>
                    </div>
                </el-form-item>
                <div class="btn-group">
                    <div class="login-btn" @click="handleSubmit">登录</div>
                    <div class="tips" @click="handleChangeType">没有账号?&nbsp;去注册</div>
                </div>
            </el-form>
            <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form" v-else :key="type">
                <h2 class="title">注册账号</h2>
                <el-form-item label="" prop="userName">
                    <input class="input" type="text" placeholder="用户名" v-model="ruleForm2.userName">
                </el-form-item>
                <el-form-item label="" prop="password">
                    <input class="input" type="password" placeholder="密码" v-model="ruleForm2.password">
                </el-form-item>
                <el-form-item label="" prop="realName">
                    <input class="input" type="text" placeholder="真实姓名" v-model="ruleForm2.realName">
                </el-form-item>
                <el-form-item label="" prop="phone">
                    <input class="input" type="phone" placeholder="手机号" v-model="ruleForm2.phone">
                </el-form-item>
                <div class="btn-group">
                    <div class="login-btn" @click="handleRegister">注册</div>
                    <div class="tips" @click="handleChangeType">已有账号?&nbsp;去登录</div>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
import { getCode, login, register } from "@/utils/request.js";
import { setUserInfo } from "@/utils/token.js"
import { setToken } from "@/utils/token.js"
export default {
    name: 'LoginForm',
    props: {

    },
    data() {
        return {
            ruleForm1: {
                userName: '',
                password: '',
                code: '',
                uuid: ''
            },
            rules: {
                userName: [
                    { required: true, message: '请输入账号', trigger: ['blur','input'] },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: ['blur','input'] },
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: ['blur','input'] },
                ],
            },
            ruleForm2: {
                userName: '',
                password: '',
                realName: '',
                phone: ''
            },
            rules2: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: ['blur','input'] },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: ['blur','input'] },
                ],
                realName: [
                    { required: true, message: '请输入真实姓名', trigger: ['blur','input'] },
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: ['blur','input'] },
                ],
                
            },
            codeImg: "",
            type: '1', // 1登录 2注册
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.getCode();
        },
        handleCancel() {
            this.$emit('cancel')
        },
        handleSubmit() {
            this.$refs.ruleForm1.validate((res) => {
                if(res == true) {
                    login(this.ruleForm1).then(res => {
                        console.log('登录res===', res);
                        if (res.code == '200' && JSON.stringify(res.data) != JSON.stringify({})) {
                            const {
                                token,
                                sysUser
                            } = res.data
                            setToken(token);
                            setUserInfo(sysUser);
                            this.$emit('cancel')
                            this.$emit('loginSuccess')
                            this.$forceUpdate();
                        } else {
                            alert('登录失败，请检查账号密码')
                        }
                    })
                }
            })
            
        },
        getCode() {
            getCode().then(res => {
                if (res && res.code == 200) {
                    this.codeImg = res.data.img;
                    this.ruleForm1.uuid = res.data.uuid;
                }
            })
        },
        handleChangeType() {
            this.type = this.type == '1' ? '2' : '1';
        },
        handleRegister() {
            this.$refs.ruleForm2.validate((res) => {
                if(res == true) {
                    register(this.ruleForm2).then(res => {
                        if(res.code == '200') {
                            this.$message({
                                message: '注册成功',
                                type: 'success'
                            });
                            setTimeout(() => {
                                this.handleChangeType();
                            }, 2000)
                        }
                    })
                }
            })
        }
    },
    computed: {
        code() {
            return 'data:image/jpg;base64,' + this.codeImg
        }
    }
}
</script>
<style lang="scss" scoped>
.login-box {
    display: flex;
    height: 420px;
    border: 2px solid #000000;

    .left {
        height: 420px;

        img {
            height: 420px;
        }
    }

    .right {
        flex: 1;
        padding: 0 50px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .form {
            width: 100%;
        }
        .title {
            margin-bottom: 20px;
            text-align: center;
        }

        .input {
            width: 100%;
            height: 35px;
            border: 2px solid #000000;
            text-indent: 1em;
            box-sizing: border-box;
        }

        .code-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .input-code {
                width: 70%;
                height: 35px;
                border: 2px solid #000000;
                text-indent: 1em;
            }

            .code {
                width: 30%;
                height: 40px;
                white-space: nowrap;
                img {
                    width: 100%;
                    height: 40px;
                }
            }
        }
    }
}

::v-deep {
    .el-form-item {
        margin-bottom: 17px !important;
    }
    .el-form-item__content {
        margin-left: 0px !important;
    }
}



.tips:hover {
    color: #409EFF;
}

.btn-group {
    text-align: center;
    cursor: pointer;

    .login-btn {
        margin: auto;
        width: 100px;
        height: 40px;
        background-color: #001F4B;
        color: #ffffff;
        line-height: 40px;
        font-size: 15px;
        border-radius: 4px;
    }

    .tips {
        margin: 10px auto 0;
        text-align: center;
    }
}
</style>
